/*顶部下拉出现隐藏顶部*/
window.addEventListener("scroll", function () {
    let Top = this.document.querySelector('.paycheckout').offsetTop
    if (document.documentElement.scrollTop > Top) {
        document.querySelector(".headerHidden").style.top = "0px";
        document.querySelector(".headerHidden").style.transition = 'all .3s'
    } else {
        document.querySelector(".headerHidden").style.top = "-80px";
    }
});
/* xuzhe修改 */
// tab栏切换
let selectTime = document.querySelectorAll('.wrapper2 .boxbody:nth-of-type(3) a')
for (let i = 0; i < selectTime.length; i++) {
    selectTime[i].addEventListener('click', function () {
        for (let j = 0; j < selectTime.length; j++) {
            selectTime[j].classList.remove("active")
        }
        this.classList.add('active')
    })
}
let selectWay = document.querySelectorAll('.wrapper2 .boxbody:nth-of-type(4) a')
for (let i = 0; i < selectWay.length; i++) {
    selectWay[i].addEventListener('click', function () {
        for (let j = 0; j < selectWay.length; j++) {
            selectWay[j].classList.remove("active")
        }
        this.classList.add('active')
    })
}
//函数动态生成
function goodsadress(title) {
    this.title = title
}
const b1 = new goodsadress('修改收货地址')
const b2 = new goodsadress('添加收获地址')
let emptyArr = []
//添加与修改地址动态生成
goodsadress.prototype.show = function () {
    console.log('r4r32rf3gf2gf23g2f')
    const bigbox = document.createElement('div')
    bigbox.className = 'bigsection1'
    bigbox.innerHTML =
        ` <section class="bigsection">
    <div class="wrapper1">
        <div class="Aheader">
            <h3>${this.title}</h3>
            <a href="" class="el-icon-circle-close"></a>
        </div>
        <div class="Abody">
            <div class="edit">
                <section class="editform">
                    <div class="formitem">
                        <div class="label">
                            &nbsp;
                            收货人：</div>
                        <div class="field">
                            <input class="input" placeholder="请输入收货人" name="name">
                        </div>
                    </div>
                    <div class="formitem">
                        <div class="label">
                            <i></i>
                            <i></i>
                            手机号：
                        </div>
                        <div class="field">
                            <input class="input" placeholder="请输入手机号" name="phone">
                        </div>
                    </div>
                    <div class="formitem" id="adr">
                        <div class="label">地
                            <i></i>
                            区：
                        </div>
                        <div class="field">
                            <div class="selectBox"  id="adr">
                                 <span>请输入地区</span>
                                 <i class="el-icon-arrow-down"></i>
                                 <!-- <div class="option">
                                <span></span>
                            </div> --!> 
                            </div>
                        </div>
                    </div>
                    <div class="formitem">
                        <div class="label">详细地址：</div>
                        <div class="field">
                            <input class="input" placeholder="请输入详细地址" name="adress">
                        </div>
                    </div>
                    <div class="formitem">
                        <div class="label">邮政编码：</div>
                        <div class="field">
                            <input class="input" placeholder="请输入邮政编码" name="post">
                        </div>
                    </div>
                    <div class="formitem">
                        <div class="label">地址标签：</div>
                        <div class="field">
                            <input class="input" placeholder="请输入地址标签" name="tag">
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="Afooter">
            <button class="gray middle btn" id="del">取消</button>
            <button class="primary middle btn" id="allright">确认</button>
        </div>
    </div>

    </section>
    `

    const onMoveBoxClicked = function (e) {
        e.stopPropagation()

        if (e.target.tagName !== 'BUTTON') return

        if (e.target.id === 'del' && bigbox) {
            return bigbox.remove()
        }

        if (e.target.id === 'allright') {
            let temp = localStorage.getItem('temp')
            let temp1 = localStorage.getItem('temp1')
            let temp2 = localStorage.getItem('temp2')
            console.log(123);
            emptyArr.push({
                name: document.querySelector("[name=name]").value,
                teb: document.querySelector("[name=phone]").value,
                province: temp + ' ' + temp1 + ' ' + temp2,
                paddress: document.querySelector("[name=adress]").value,
                postcode: document.querySelector("[name=post]").value,
                tag: document.querySelector("[name=tag]").value
            })
            console.log(emptyArr);
            localStorage.setItem('newData', JSON.stringify(emptyArr))
            if (bigbox) bigbox.remove()
        }

        // 把click事件注销掉
        document.querySelector('.movebox').removeEventListener('click', onMoveBoxClicked)
    }

    document.querySelector('.movebox').appendChild(bigbox)
    //点击取消按钮删除盒子
    document.querySelector('.movebox').addEventListener('click', onMoveBoxClicked)

    document.querySelector(".selectBox").addEventListener('click', function (e) {
        e.stopPropagation()
        let selectBox = document.querySelector(".selectBox")
        let sp = document.querySelector('.selectBox>span')
        let div = document.createElement('div')
        div.classList.add("option")
        if (selectBox.querySelector('.option')) {
            selectBox.removeChild(selectBox.querySelector('.option'))
        }
        let str = ''
        str = addressData.map(item => {
            const { id, province, city } = item
            return `<span>${province}</span>`
        }).join('')
        div.innerHTML = str
        for (let i = 0; i < addressData.length; i++) {
            if (e.target.innerHTML === addressData[i].province) {
                let str1 = ''
                localStorage.setItem('temp', e.target.innerHTML)
                for (let j = 0; j < addressData[i].city.length; j++) {
                    str1 += `<span>${addressData[i].city[j].name}</span>`
                }
                div.innerHTML = str1
            }
        }
        let str2 = ''
        for (let i = 0; i < addressData.length; i++) {
            for (let j = 0; j < addressData[i].city.length; j++) {
                if (e.target.innerHTML === addressData[i].city[j].name) {
                    localStorage.setItem('temp1', e.target.innerHTML)
                    for (let k = 0; k < addressData[i].city[j].district.length; k++) {
                        str2 += `<span>${addressData[i].city[j].district[k]}</span>`
                    }
                    div.innerHTML = str2
                }
            }
        }
        selectBox.appendChild(div)
        for (let i = 0; i < addressData.length; i++) {
            for (let j = 0; j < addressData[i].city.length; j++) {
                for (let k = 0; k < addressData[i].city[j].district.length; k++) {
                    if (e.target.innerHTML === addressData[i].city[j].district[k]) {
                        // 点击区县 存入本地
                        localStorage.setItem('temp2', e.target.innerHTML)
                        let div = selectBox.querySelector('.option')
                        if (div) {
                            selectBox.removeChild(div)
                        }
                        // 获取本地数据
                        let temp = localStorage.getItem('temp')
                        let temp1 = localStorage.getItem('temp1')
                        let temp2 = localStorage.getItem('temp2')
                        sp.innerHTML = temp + ' ' + temp1 + ' ' + temp2
                        sp.style.color = '#333'
                    }
                }
            }
        }
    })
    document.body.addEventListener('click', function () {
        let selectBox = document.querySelector(".selectBox")
        let div = document.querySelector('.selectBox .option')
        if (div) {
            selectBox.removeChild(div)
        }
    })
}
// 定义数组对象
let addressData =
    [
        {
            id: 1,
            province: '北京',
            city: [
                { id: 1, name: '北京市', district: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', '密云区', '延庆区', '经济技术开发区'] },
            ],
        },
        {
            id: 2,
            province: '陕西省',
            city: [
                { id: 1, name: '西安市', district: ['新城区', '碑林区', '莲湖区', '灞桥区', '未央区', '阎良区', '临潼区', '长安区', '高陵区', '鄠邑区', '蓝田县', '周至县'] },
                { id: 1, name: '铜川市', district: ['王益区', '印台区', '耀州区', '宜君县'] },
                { id: 1, name: '宝鸡市', district: ['渭滨区', '岐山县', '千阳县', '金台区', '扶风县', '麟游县', '陈仓区', '眉县', '凤县', '凤翔县', '陇县', '太白县'] },
                { id: 1, name: '咸阳市', district: ['秦都区', '泾阳县', '彬县', '武功县', '杨陵区', '乾县', '长武县', '兴平市', '渭城区', '礼泉县', '旬邑县', '二原县', '永寿县', '淳化县'] },
                { id: 1, name: '渭南市', district: ['临渭区', '合阳县', '富平县', '华县', '澄城县', '潼关县', '蒲城县', '大荔县', '白水县', '韩城市', '华阴市'] },
                { id: 1, name: '延安市', district: ['宝塔区', '子长县', '富县', '安塞区', '志丹县', '洛川县', '延长县', '吴起县', '宜川县', '延川县', '甘泉县', '黄龙县', '黄陵县'] },
                { id: 1, name: '汉中市', district: ['汉台区', '西乡县', '镇巴县', '南郑县', '勉县', '留坝县', '城固县', '宁强县', '佛坪县', '洋县', '略阳县'] },
                { id: 1, name: '榆林市', district: ['榆阳区', '靖边县', '佳县', '神木市', '定边县', '吴堡县', '府谷县', '绥德县', '清涧县', '横山县', '米脂县', '子洲县'] },
                { id: 1, name: '安康市', district: ['汉滨区', '紫召加', '旬阳县', '汉阴县', '岚皋县', '白河县', '石泉县', '平利县', '宁陕县', '镇坪县'] },
                { id: 1, name: '商洛市', district: ['商州区', '山阳县', '洛南县', '镇安县', '丹凤县', '柞水县', '商南县'] },
            ],
        }
    ]
//修改地址模块
const change = document.querySelector('.change')
change.addEventListener('click', function (e) {
    e.stopPropagation()
    b1.show()

})

//添加地址模块
const add1 = document.querySelector('.add1')
add1.addEventListener('click', function (e) {
    e.stopPropagation()
    b2.show()
})


//切换地址模块
function addressrender1(name1, teb, paddress) {
    this.name1 = name1
    this.teb = teb
    this.paddress = paddress
}
const a1 = new addressrender1('diqiuren1', '173****2862', '陕西省西安市草滩十路')
// const a2 = new addressrender1('diqiuren', '173****2861', '陕西省西安市草滩百路')
addressrender1.prototype.show = function (arr) {
    const bigbox = document.createElement('div')
    bigbox.className = 'bigsection1'
    let str = arr.map((item, index) => {
        const { name, teb, paddress } = item
        return ` <div class="text item" id="${index}">
                                <ul>
                                    <li>
                                        <span> 收货人：</span>${name}
                                    </li>
                                    <li><span>联系方式：</span>${teb}</li>
                                    <li><span>收货地址：</span>${paddress}</li>
                                </ul>
                            </div>`
    }).join('')
    bigbox.innerHTML = `
    <section class="bigsection">
                    <div class="wrapper1">
                        <div class="Aheader">
                            <h3>切换收货地址</h3>
                            <a href="" class="el-icon-circle-close"></a>
                        </div>
                        <div class="Abody">
                        ${str}
                        </div>
                        <div class="Afooter">
                            <button class="gray middle btn" id="del1">取消</button>
                            <button class="primary middle btn" id="allright1">确认</button>
                        </div>
                    </div>
                 </section>
    `
    document.querySelector('.movebox').appendChild(bigbox)
    //点击取消按钮删除盒子
    let index = 0
    let textItem = document.querySelectorAll('.Abody .text.item')
    document.querySelector('.movebox').addEventListener('click', function (e) {
        if (e.target.tagName === 'DIV') {
            for (let i = 0; i < textItem.length; i++) {
                textItem[i].classList.remove('active')
            }
            e.target.classList.add('active')
            if (e.target.classList.contains("active")) {
                index = e.target.id
                let str = localStorage.getItem('newData') || '[]'
                addressArr = JSON.parse(str)
                console.log(addressArr)
            }
        }
        if (e.target.tagName === 'BUTTON') {
            if (e.target.id === 'del1') {
                if (bigbox) bigbox.remove()
            } else if (e.target.id === 'allright1') {
                document.querySelector('.address li:nth-child(1) em').innerHTML = addressArr[index].name
                document.querySelector('.address li:nth-child(2) em').innerHTML = addressArr[index].teb
                document.querySelector('.address li:nth-child(3) em').innerHTML = addressArr[index].paddress
                if (bigbox) bigbox.remove()
            }
        }
    })
}
const toggle1 = document.querySelector('.toggle1')
let addressArr = []
toggle1.addEventListener('click', function () {
    let str = localStorage.getItem('newData') || '[]'
    addressArr = JSON.parse(str)
    a1.show(addressArr)
})


//map方法实现动态渲染
const aAddress = [
    {
        name: 'diqiuren',
        teb: '173****2861',
        paddress: '陕西省西安市草滩百路'
    },
    {
        name: 'diqiuren1',
        teb: '173****2862',
        paddress: '陕西省西安市草滩十路'
    }
]


//提交订单按钮
document.querySelector('.order').addEventListener('click', function () {
    localStorage.setItem('price', document.querySelector('.price').value)
    location.href = './payment.html'
})










